<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'

// 查询
const itemsPerPage = ref(10);
const headers = [
    {title: '事件ID', key: 'recSn', sortable: false},
    {title: '事件名称', key: 'eventName', sortable: false, width: 140},
    {title: '事件类型', key: 'eventType', sortable: false, width: 180},
    {title: '事件内容', key: 'eventContent', sortable: false},
    {title: '时间', key: 'recordTime', sortable: false, width: 150}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);

const search = ref('');
const name = ref(null);
const type = ref(null);
watch(name, () => {
    search.value = name.value
})
watch(type, () => {
    search.value = type.value
})


function loadItems({page, itemsPerPage}) {
    loading.value = true;
    axios.post('/buliangData/select', {
        pageNo: page,
        pageSize: itemsPerPage,
        eventName: name.value,
        eventType: type.value
    }).then(({data}) => {
        items.value = data.data.records;
        totalItems.value = data.data.total;
        loading.value = false;
    })
}

onMounted(() => {
    loadItems({page: 1, itemsPerPage: itemsPerPage.value});
});

</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>不良事件</v-toolbar-title>
        <v-text-field v-model="name" :clearable="true" hide-details placeholder="事件名称"></v-text-field>
        <v-text-field v-model="type" :clearable="true" hide-details placeholder="事件类型"></v-text-field>
    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="itemsPerPage" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
    </v-data-table-server>
</template>

<style scoped lang="less">

</style>
